<template>
  <div class="profile-container">
  
  <Header />

    <el-divider></el-divider>

    <el-row :gutter="20">
      <el-col :span="6" :offset="2">
        <div class="menu">
          <p class="menu-item" @click="activeFun(1)" :class="{ active: active.active1 }">个人信息</p>
          <el-divider border-style="dotted" />
          <p class="menu-item" @click="activeFun(2)" :class="{ active: active.active2 }">我的消息</p>
          <el-divider border-style="dotted" />
          <p class="menu-item" @click="activeFun(3)" :class="{ active: active.active3 }">我的收藏</p>
          <el-divider border-style="dotted" />
          <p class="menu-item" @click="activeFun(4)" :class="{ active: active.active4 }">发布的旅游景点</p>
          <el-divider border-style="dotted" />
        </div>
      </el-col>
      <el-col :span="14">
        <div class="content">
          <div v-show="active.active1">
            <el-card class="user-info-card">
              <div class="user-info-header">
                <el-avatar size="80" :src="user?.headPortrait" />
                <div class="user-details">
                  <h2>{{ user?.username }}</h2>
                  <p class="user-email">{{ user?.email }}</p>
                  <p class="user-role">{{ admin }}</p>
                </div>
              </div>
            </el-card>
          </div>
          <div v-show="active.active2">
            
          </div>
          <div v-show="active.active3">
            <div v-if="like_item?.length === 0">
              <el-empty description="还没有数据，正在添加中..."/>
            </div>
            <div v-else>
              <OneList v-for="(item,index) in like_item" :key="item.id" :props-data="item"/>
            </div>
           
          </div>
          <div v-show="active.active4">
            <div v-if="my_item?.length === 0">
              <el-empty description="还没有数据，正在添加中..."/>
            </div>
            <div v-else>
              <OneList v-for="(item,index) in my_item" :key="item.id" :props-data="item" >
                <template #footer>
                  <button style="padding: 8px 24px;border-radius: 4px; background-color: red;margin-left: 20px;" @click="handleDelete(item.id)">删除</button>
                </template>
              </OneList>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>
    <Footer />
  </div>
</template>

<script setup lang="ts">

import { ref,onMounted,defineComponent } from 'vue'

import type { UserForm } from '@/types/tuil'
import { CityList } from '@/api'
import type { OneListForm } from '@/types/tuil'
import { useRouter } from 'vue-router';

const router = useRouter();
//这里是个人信息
const user = ref<UserForm>();
// 判断是否是管理员
const admin = ref("普通用户")
// 拿到本地存储的数据
const data = JSON.parse(localStorage.getItem("user")) ;

// 定义父组件中的删除事件处理方法
async function  handleDelete(id:number) {
  console.log('删除事件被触发');
   await CityList.deleteList(id);
  // 发送删除一条数据
  alert("删除成功！");
  router.go(0);
  // 执行删除操作...
}

const like_item = ref<OneListForm[]>()
const my_item = ref<OneListForm[]>()

const active = ref({
  active1: true,
  active2: false,
  active3: false,
  active4: false,
})

const email = ref(data.email);


onMounted( async ()=>{
  const res3 = await CityList.getLikeList({"email":email.value});
  const res4 = await CityList.getMyList({"email":email.value});
  console.log(res3,"res3");
  console.log(res4,"res4");
  console.log(email.value);
  
  like_item.value = res3
  my_item.value = res4
})

function activeFun(num: number) {
  // 处理菜单项点击逻辑
  if( num === 1){
    active.value.active1 = true
    active.value.active2 = false
    active.value.active3 = false
    active.value.active4 = false
  }else if(num === 2){
    active.value.active1 = false
    active.value.active2 = true
    active.value.active3 = false
    active.value.active4 = false
  }else if(num === 3){
    active.value.active1 = false
    active.value.active2 = false
    active.value.active3 = true
    active.value.active4 = false
  }else if(num === 4){
    active.value.active1 = false
    active.value.active2 = false
    active.value.active3 = false
    active.value.active4 = true
  }
}

onMounted(()=>{
  // 在页面加载的时候从本地存储拿到数据，并且放到本地缓存中
   user.value = JSON.parse(localStorage.getItem("user"));
   if(user.value?.role_id == "1"){
      admin.value = "普通用户"
   }else if(user.value?.role_id == "2"){
      admin.value = "超级会员"
   }else if(user.value?.role_id == "3"){
      admin.value = "蓝砖会员"
   }else if(user.value?.role_id == "4"){
      admin.value = "管理员"
   } 
   console.log(user.value);
   
})


const editProfile = () => {
  // 处理编辑资料的逻辑
  console.log('编辑资料')
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.profile-card {
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.profile-header {
  display: flex;
  align-items: center;
}

.profile-info {
  margin-left: 20px;
}

.menu {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
}

.menu-item {
  font-size: 18px;
  cursor: pointer;
  padding: 10px 0;
  transition: color 0.3s;
}

.menu-item:hover {
  color: #409EFF;
}

.active {
  color: #409EFF;
  font-weight: bold;
}

.content {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-info-card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-info-header {
  display: flex;
  align-items: center;
}

.user-details {
  margin-left: 20px;
}

.user-email {
  color: #666;
  font-size: 14px;
}

.user-role {
  color: #409EFF;
  font-weight: bold;
}

</style>